<template>
    <div class="loginbackground">
        <el-form
            :rules="rules"
            ref="LoginForm"
            :model="LoginForm"
            class="loginContainer"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <h3 class="loginTitle">用户登录</h3>
            <el-form-item prop="username">
                <el-input
                    type="text"
                    v-model="LoginForm.username"
                    prefix-icon="el-icon-user-solid"
                    aria-autocomplete="false"
                ></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                    type="password"
                    v-model="LoginForm.password"
                    prefix-icon="el-icon-lock"
                    aria-autocomplete="false"
                ></el-input>
            </el-form-item>

            <div class="tip">
                <!-- 记住我 -->
                <el-checkbox v-model="checked" class="rememberMe"
                    >记住我</el-checkbox
                >
                <!-- 找回密码 -->
                <el-button type="text" @click="open()" class="forgetPw"
                    >忘记密码？</el-button
                >
            </div>
            <el-button
                type="primary"
                style="width: 100%"
                @click="_login()"
                :loading="loginLoadingStatus"
                >登录</el-button
            >
        </el-form>
    </div>
</template>

<script >
import userApi from '../request/userApi';
export default {
    inject: ['reload'],
    data() {
        return {
            loginLoadingStatus: false,
            LoginForm: {
                username: '',
                password: '',
            },
            rules: {
                username: {
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur',
                },
                password: {
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur',
                },
            },
            checked: true,
            loading: false,
        };
    },
    created() {
        // 改变标签高亮状态
        this.$store.commit('changeSelectState', 8);
        this._getLoginInfo();
    },
    mounted() {},
    methods: {
        _login() {
            //点击登录的时候先调用validate方法验证表单内容是否有误
            this.$refs.LoginForm.validate(async (valid) => {
                //如果valid参数为true则验证通过
                if (!valid) {
                    return;
                }
                if (this.checked) {
                    localStorage.setItem('username', this.LoginForm.username);
                    localStorage.setItem('password', this.LoginForm.password);
                } else {
                    localStorage.removeItem('username');
                    localStorage.removeItem('password');
                }
                this.loginLoadingStatus = true;
                userApi
                    .userlogin(this.LoginForm.username, this.LoginForm.password)
                    .then((res) => {
                        if (res.code === 200) {
                            this.$message.success('登陆成功');
                            this.$store.commit('changeLoginState', true);
                            window.sessionStorage.setItem(
                                'token',
                                res.data.token
                            );
                            this.$store.commit('setUserId', res.data.userId);
                            this.loginLoadingStatus = false;
                            this.$router.push('/home');
                        } else {
                            this.$message.error('登陆失败');
                        }
                    });
            });
        },
        _getLoginInfo() {
            // 如果存在用户名和密码则自动填充
            if (localStorage.getItem('username')) {
                this.LoginForm.username = localStorage.getItem('username');
                this.LoginForm.password = localStorage.getItem('password');
            }
        },
    },
};
</script>
<style scoped>
.loginContainer {
    top: 25%;
    margin-left: 37%;
    border-radius: 15px;
    background-clip: padding-box;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeeea;
    box-shadow: 0 0 25px #cac6c6;
    position: absolute;
}
.loginTitle {
    margin: 0px auto 40px auto;
    text-align: center;
}
.loginRemember {
    text-align: left;
    margin: 0px 0px 15px 0px;
}
.el-form-item__content {
    display: flex;
    align-items: center;
}
.loginbackground {
    height: 100%;
    background-image: url('../assets/img/R-C.jpg');

    background-size: cover;
}
.tip .rememberMe {
    float: left;
    margin-top: 10px;
}
.tip .forgetPw {
    float: right;
}
.tip {
    height: 50px;
}
</style>
